<template>
  <div>
    <center>
      <!-- 模糊查询   表单   根据字段查询   -->
      <el-form :inline="true" :model="subject" ref="subject" class="demo-form-inline">
        <el-form-item label="课程名称" prop="title">
          <el-input v-model="subject.title" placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary"  @click="resetForm('subject')">重置</el-button>
          <el-button type="primary" @click="addClass">添加</el-button>
        </el-form-item>
      </el-form>
    </center>
    <!--  table表格 数据展示 -->
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :default-expand-all = 'topen'>
      <!-- type="expand-cond"     -->
      <el-table-column
        prop="id"
        label="序号"
        sortable
        type="expand-cond">
      </el-table-column>
      <el-table-column
        prop="title"
        label="分类名称"
        sortable
      >
        <el-table-column
          v-if="false"
          prop="parentId"
          label="父级id">
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)" type="success" round>编辑</el-button>
          <el-button
            size="mini"
            @click="addClasstwo(scope.$index, scope.row)" type="success" round v-if="scope.row.parentId==0">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改信息的会话层   -->
    <el-dialog
      :title=cname
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose">
      <!--form  表单      -->
      <el-form  :model="ruleForm" status-icon  ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="分类名称:" prop="title">
          <el-input type="text"   style="width: 40%" v-model="ruleForm.title" autocomplete="off" ></el-input>
        </el-form-item>
        <!--  计数器        -->
        <el-form-item label="排序:" prop="sort">
          <el-input-number v-model="ruleForm.sort" @change="handleChange" :min="0" :max="100" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="ruleForm.remark">
          </el-input>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="submitForm()" >提交</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 添加  的会话层   -->
    <el-dialog
      :title=cname
      :visible.sync="dialogVisible1"
      width="80%"
      :before-close="handleClose">
      <!--form  表单      -->
      <el-form  :model="ruleAddForm" status-icon  ref="ruleAddForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="分类名称:" prop="title">
          <el-input type="text"   style="width: 40%" v-model="ruleAddForm.title" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="pass">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="ruleAddForm.remark">
          </el-input>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="submitAddForm" >提交</el-button>
          <el-button @click="dialogVisible1=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import qs from 'qs'
    export default {
        name: "fenlei",
      methods: {
        /*table  表格*/
        tableRowClassName({row, rowIndex}) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
        },
        /*form 表单的提交事件*/
        onSubmit() {

          this.queryAll();
          this.topen=true;
          // alert("topen的值是："+this.topen);

        },
        /*重置事件的方法*/
        resetForm(formName) {
          this.$refs[formName].resetFields();
          this.queryAll();
          this.topen=false;
        }
        ,
        /*table   修改按钮   信息 的 修改   事件方法*/
        handleEdit(index,row){
          // alert("index"+JSON.stringify(index)+"============"+"row"+JSON.stringify(row));
          /* 修改信息的会话层   form 表单   把一行的值赋值给ruleForm*/
          this.ruleForm.title=row.title;
          this.ruleForm.sort=row.sort;
          this.ruleForm.remark=row.remark;
          this.ruleForm.id=row.id;

          /*会话层   标题   */
          this.cname=row.title+"--------信息审核";
          this.dialogVisible = true;

        },
        /*添加一级分类按钮*/
        addClass(){
          this.dialogVisible1 = true;
          this.ruleAddForm.parentId=0;
        },
        /*添加 二级 分类*/
        addClasstwo(index,row){
          // alert(JSON.stringify(row.id));
          this.dialogVisible1 = true;
          this.ruleAddForm.parentId=row.id;
        }
        /*form表单   X号关闭的方法事件*/
        ,
        handleClose(done) {
          this.$confirm('确定关闭吗?')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        /*form计数器事件*/
        handleChange(value) {
          console.log(value);
        },
        /*查询所有数据 事件方法*/
        queryAll(){
          this.$axios.post("/course/edu-subject/queryAll",qs.stringify(this.subject)).then(res=>{
            /*将查询出的值  赋值给tabledata*/
            this.tableData=res.data;
          })


        },

        /*  添加事件   */
        submitAddForm(){
          this.$axios.post("/course/edu-subject/addSubject",qs.stringify(this.ruleAddForm)).then(res=>{
            if (res.data===true){
              this.dialogVisible1=false;
              this.queryAll();
            }else {
              alert("添加失败");
            }
          })
        },
        submitForm(){
          this.$axios.post("/course/edu-subject/updSubject",qs.stringify(this.ruleForm)).then(res=>{
            if (res.data===true){
              this.dialogVisible=false;
              this.queryAll();
            }else {
              alert("修改失败");
            }
          })
        }
      },
      /*页面刷新执行*/
      created() {
        this.queryAll();
      }
      ,
      data() {
        return {
          /*table表格数据*/
          tableData:  [],
          /*form 表单 绑定值*/
          subject:{
            title:''
          }
          ,
          /* 修改信息的会话层   form 表单  */
          dialogVisible : false
          ,
          dialogVisible1 : false,
          /*form表单的数据*/
          ruleAddForm: {
            title: '',
            remark: ''
          },
          topen:false,
          cname:'',
          /*form表单的数据*/
          ruleForm: {
            title: '',
            remark: '',
            sort:''
          }
        }
      }
    }
</script>

<style scoped>

</style>
